<script>
export default {
  created(){
    if(this.$route.query.sear){
      this.search_init()
    }else{
      this.select_goods()
    }
  },
  data() {
    return {
      item_list: [], // 数据数组
    }
  },
  methods: {
    async search_init() {
      this.item_list = [] // 清空数据
      const { data : res } = await this.$http.get("/flower-goods/home_search/"+this.$route.query.sear)
      this.item_list = res.data;
    },
    // 商品详细页面
    shop_id(goodsId){
      this.$router.push({path:"/details",query: {goodId: goodsId}})
    },
    // 根据类型查询数据
     async select_goods(){
      this.item_list = [] // 清空数据
      const {data : res} = await this.$http.get("/flower-types/list/"+this.$route.query.index)
      this.item_list = res.data
    }
  }
}
</script>
<template>
  <div class="app">
      <div class="item_box" v-for="(item,index) in item_list" :key="index" @click="shop_id(item.goodsId)">
          <img :src="$api+'/common/download/'+item.goodsImg">
          <div style="width: 283px; height: 155px; padding: 0 10px;">
            <h5 style="color: red; font-size: 15px; margin: 5px 0;">{{ item.goodsName }}</h5>
            <h6 style="font-size: 12px; margin: 3px 0;">{{ item.goodsMaterial }}</h6>
            <span style="font-size: 12px;">{{ item.item_word }}</span><br>
            <h3 style="color: #FF471D;margin-bottom: 2px; font-weight: 400;">￥{{ item.goodsPrice }}</h3>
            <span style="color: #999; font-size: 10px;">已售:{{ item.goodsSold }}件</span>
          </div>
      </div>
  </div>
</template>
<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
  .app {
    position: relative;
    left: 330px;
    width: 1200px;
    padding-top: 10px;
    padding-left: 5px;
    .item_box {
      float: left;
      width: 285px;
      height: 475px;
      margin-right: 10px;
      margin-bottom: 15px;
      overflow: hidden;
      div {
        //  设置过渡 所有元素都加过渡 过渡事件0.5秒  表示匀速（linear）
        transition: all 0.5s linear;
      }
      img {
        width: 285px;
        height: 310px;
      }
    }
    .item_box:hover {
        border: 1px solid #999;
    }
  }
</style>